<template>
	<view class="box">
		<div class="pickerMask" @click="maskClick" catchtouchmove="true"></div>
		<view class="level-container">
			<!-- <h1 class="title">选择收货地址</h1> -->
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<h1 class="title">选择收货地址</h1>
				<view class="" style="font-size: 32upx;padding: 8upx 40upx;" @tap="submit">确定</view>
			</view>
			<ul class="name-list font-16 font-b line-h-40">
				<li :class="showIndex==0?'select':''" @click="anewSelect(0)">{{province}}</li>
				<li :class="showIndex==1?'select':''" @click="anewSelect(1)" v-if="showIndex>=1">{{city}}</li>
				<li :class="showIndex==2?'select':''" @click="anewSelect(2)" v-if="showIndex>=2">{{area}}</li>
				<li :class="showIndex==3?'select':''" @click="anewSelect(3)" v-if="showIndex>=3">{{street}}</li>
				<!-- <li style="margin-left: 0upx;">取消</li> -->
				<!-- <li style="color: red;margin-right: 0;">确定</li> -->
			</ul>
			<ul v-if="showIndex==0" class="content" :style="'height:'+ heightCot + 'upx'">
				<li @click="selectPro(item, index)" v-for="(item,index) in provinceData" :key="index">
					{{item.name}}
					<uni-icons type="checkmarkempty" size="20" :color="iconColor" v-if="index === 0"></uni-icons>
				</li>
			</ul>
		
			<ul v-if="showIndex==1" class="content" :style="'height:'+ heightCot + 'upx'">
				<li @click="selectCity(item,index)" v-for="(item,index) in cityData" :key="index">
					{{item.name}}
					<uni-icons type="checkmarkempty" size="20" :color="iconColor" v-if="index === 0"></uni-icons>
				</li>
			</ul>
		
			<ul v-if="showIndex==2" class="content" :style="'height:'+ heightCot + 'upx'">
				<li @click="selectaArea(item,index)" v-for="(item,index) in areaData" :key="index">
					{{item.name}}
					<uni-icons type="checkmarkempty" size="20" :color="iconColor" v-if="index === 0"></uni-icons>
				</li>
			</ul>
		
			<ul v-if="showIndex==3" class="content" :style="'height:'+ heightCot + 'upx'">
				<li @click="selectStreet(item,index)" v-for="(item,index) in streetsData" :key="index">
					{{item.name}}
					<uni-icons type="checkmarkempty" size="20" :color="iconColor" v-if="index === 0"></uni-icons>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import {citiesList} from '@/common/api/api'
	export default {
		props: {
			addressInfo: Object
		},
		data() {
			return {
				province: "省-",
				city: "市-",
				area: "区/县-",
				street: "街道",
				cityDataAll: '', // 市的所有數據
				getAreaAll: '', // 区的所有数据
				presentIndex: [],
				areaIndex: 0,
				provinceData: [], // 当前展示的省数据
				cityData: [], // 当前展示的市数据
				areaData: [], //当前展示的区数据
				streetsData: [], //当前展示的区数据
				showIndex: 0,
				heightCot: 0,
				iconColor: '#666',
				provincecode: '',
				citycode: '',
				countycode: '',
				towncode: ''
			}
		},
		created() {
			if(this.addressInfo && this.addressInfo.id && !this.addressInfo.errorFlag) {
				this.province = this.addressInfo.province
				this.city = this.addressInfo.city
				this.area = this.addressInfo.county
				this.street = this.addressInfo.town
				this.provincecode = this.addressInfo.provincecode
				this.citycode = this.addressInfo.citycode
				this.countycode = this.addressInfo.countycode
				this.towncode = this.addressInfo.towncode
			}
			uni.getSystemInfo({
				success: res => {
					console.log(res.safeArea.height)
					this.heightCot = (res.safeArea.height * 2) / 2
				}
			})
			this.getCitiesList(1)
		},
		methods: {
			getCitiesList(level, parentCode) {
				uni.showLoading()
				citiesList({level: level, parentCode: parentCode}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						if(level == 1) {
							this.provinceData = res.data || []
						}
						if(level == 2) {
							this.cityData = res.data || []
						}
						if(level == 3) {
							this.areaData = res.data || []
						}
						if(level == 4) {
							this.streetsData = res.data || []
						}
					}
				})
			},
			anewSelect(num) {
				switch (num) {
					case 0:
						this.showIndex = 0;
						this.areaData = [];
						this.streetsData = [];
						this.city = '请选择城市';
						this.area = '请选择区';
						this.street = '请选择街道'
						break;
					case 1:
						this.showIndex = 1;
						this.areaData = [];
						this.streetsData = [];
						this.area = '请选择区';
						this.street = '请选择街道'
						break;
					case 2:
						this.showIndex = 2;
						this.streetsData = [];
						this.street = '请选择街道'
						break;
					case 3:
						console.log(11111);
						break;
				}
			},
			selectPro(item,index) {
				this.getCitiesList(2, item.code)
				this.province = item.name
				this.provincecode = item.code
				this.showIndex = 1
			},
			selectCity(item, index) {
				this.getCitiesList(3, item.code)
				this.city = item.name
				this.citycode = item.code
				this.showIndex = 2
			},
			selectaArea(item, index) {
				this.getCitiesList(4, item.code)
				this.area = item.name
				this.countycode = item.code
				this.showIndex = 3
			},
			selectStreet(item, index) {
				this.street = item.name;
				this.towncode = item.code
				const {
					province,
					city,
					area,
					street,
					provincecode,
					citycode,
					countycode,
					towncode
				} = this;
				this.$emit('conceal',{
					province,
					city,
					area,
					street,
					provincecode,
					citycode,
					countycode,
					towncode
				})
				// this.showIndex = 4;
			},
			maskClick() {
			  this.pickerCancel();
			},
			submit(){
				const {
					province,
					city,
					area,
					street
				} = this;
				// this.showPicker = false;
				this.$emit('conceal',{
					province,
					city,
					area,
					street
				})
			},
			pickerCancel() {
				const {
					province,
					city,
					area,
					street
				} = this;
			  // this.showPicker = false;
			  this.$emit('conceal',{
			  	province,
			  	city,
			  	area,
			  	street
			  })
			},
		}
	}
</script>

<style lang="less">
	ul,li{
		list-style: none;
	}
	.pickerMask {
	  position: fixed;
	  z-index: 1000;
	  top: 0;
	  right: 0;
	  left: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.6);
	}
	.level-container {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0;
		z-index: 9999;
		.select {
			color: red;
			position: relative;

			&::after {
				content: '';
				width: 40upx;
				height: 6upx;
				background: red;
				position: absolute;
				left: 50%;
				bottom: -8upx;
				margin-left: -20upx;
			}
		}

		li {
			font-size: 26upx;
		}

		.content,
		.name-list {
			padding: 0 20upx;
			// flex-wrap: nowrap!important;
		}
		.content{
			display: flex;
			flex-direction: column;
		}

		.title {
			font-size: 32upx;
			margin: 30upx 20upx;
		}

		.name-list {
			display: flex;

			li {
				margin-right: 20upx;
				padding-bottom: 6upx;
			}
		}

		.content {
			margin-top: 20upx;
			height: 600upx;
			overflow-y: auto;
			flex-wrap: nowrap;

			li {
				border-bottom: 1px solid #f1f1f1;
				padding: 40upx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				::v-deep .uni-icons {
					padding-right: 40rpx;
				}
			}
			li:first-child {
				border-top: 1px solid #f1f1f1;
			}
			li:last-child {
				border-bototm: none !important;
			}
		}
	}
</style>
